<template>
    <div>
      <footer class="footer">
        <div class="footerbg">
          <img src="/assets/img/footer-bg.png" alt="">
        </div>
        <div class="footer-top pt-120 pb-110">
          <div class="container">
            <div class="row">
              <div class="col-lg-3 col-sm-6">
                <!-- footer widget -->
                <div class="footer-widget">
                  <div class="footer-logo">
                    <a href="/"><img src="/assets/img/logo.png" alt=""></a>
                  </div>
                  <p>如果你想加入我们，就请发送你的申请到官方邮箱把，这里你可以找到许多志同道合的伙伴和深藏功与名的大佬。</p>
                  <!-- footer social area -->
<!--                  <div class="footer-social-area">-->
<!--                    <ul class="social-icons social-icons-light nav">-->
<!--                      <li><a href="#" target="_blank"><i class="fa fa-facebook-f"></i></a></li>-->
<!--                      <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>-->
<!--                      <li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>-->
<!--                      <li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>-->
<!--                    </ul>-->
<!--                  </div>-->
                  <!-- End of footer social area -->
                </div>
                <!--End of footer widget -->
              </div>

              <div class="col-lg-3 col-sm-6">
                <div class="footer-widget">
                  <!-- widget header -->
                  <div class="widget-header">
                    <h5>联系我们</h5>
                  </div>
                  <!-- widget header -->
                  <div class="widget-body">
                    <ul class="address-list">
                      <li>
                        <span><i class="fa  fa-envelope"></i></span>
                        911976381@qq.com
                      </li>
                      <li>
                        <span><i class="fa  fa-map"></i></span>
                        图书馆T1206，T1207
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-sm-6">
                <div class="footer-widget">
                  <!-- widget header -->
                  <div class="widget-header">
                    <h5>开发团队</h5>
                  </div>
                </div>

                <div class="widget-body">
                  <div class="extra-link">
                    <div class="link-left">
                      <ul>
                        <li>指导老师：赵凤龙</li>
                        <li>前端: 李巧 宋志豪 黎鑫 杨延波
                        </li>
                        <li>后端：张应杨 蔡奎先 陈龙 戴许唯</li>
                        <li>UI：王文静</li>
                        <li>新媒体：孙文慧 凌丹</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-lg-3 col-sm-6">
                <div class="footer-widget">
                  <div class="widget-body">
                    <img src="../assets/img/QR.png" >
                    <p style="text-align: center">招新咨询QQ群</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>

      <!-- back to top -->
      <div @click="scrollTop" :class="`back-to-top ${scrollBtn ? 'show' : ''}`">
          <a href="#"><i class="fa fa-chevron-up"></i></a>
      </div>

    </div>
</template>

<script>
    export default {
      name: "Footer",
      data(){
        return {
          scrollBtn: false
        }
      },
      mounted() {
        window.addEventListener('scroll', this.handleScroll);
      },

      methods: {

        handleScroll () {

          if (window.scrollY > 70) {
            this.scrollBtn = true
          }
          else if (window.scrollY < 70) {
            this.scrollBtn = false
          }
        },

        scrollTop () {
            window.scrollTo(0, 0);
        }


      }
    }
</script>

<style scoped>
li{
  display: flex;
  column-gap: 10px;
  align-items: center;
}
@media (max-width: 767.98px){
.widget-body img{
  width: 200px!important;
  height: 200px!important;
}
  .widget-body .extra-link .link-left{
    width: auto;
  }
}
</style>
